<template>
  <div id="dian">
    <div class="header">
      <div class="top1">
        <img @click="black()" class="gt" src="../../../public/wx/gt.png" alt="" />
        <div class="inpBox">
          <input type="text" placeholder="点击搜索本店内的服务" />
        </div>
      </div>
      <div class="dzMsg">
        <div>
          <img
            class="pic"
            src="https://img-ucdn-static.helijia.com/zmw/upload/20190421/3c712c5b825d4c3caac3d7f010da2f15.jpg!/0/w-140/format-webp"
            alt=""
          />
        </div>
        <div>
          <p class="h2">爱英儿</p>
          <p>
            <span class="star">★★★</span>
            <span class="sText">(能手 美容师)</span>
          </p>
          <p class="sText">守时：5.0 服务：5.0 技术：5.0</p>
        </div>
      </div>
      <div class="hb">
        <p class="h6">品牌馆无忧保障</p>
        <p class="h7">
          <span>不满重做</span>
          <span>爽约3倍</span>
          <span>迟到半价</span>
          <span>售后保障</span>
        </p>
      </div>
    </div>
    <div class="g">
      <p>来自王蓉工作室</p>
    </div>
    <div class="adr">
      <li>
        <div class="li1">
          <img
            src="../../../public/4.png"
            alt=""
          />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <p>营业执照</p>
        </div>
        <p>></p>
      </li>
      <li class="li2">
        <span> 类型 </span>&nbsp;&nbsp; <span> 上门 </span>&nbsp;
        <span> 到店 </span>
      </li>
      <li>
        <b> 地址 </b>
        <div>
          <h2>西安市雁塔区海星城市广场-B座801室</h2>
          <span>距您3.8km，驾车约12分钟</span>
        </div>
        <div>
          <img src="../../../public/7.png" alt="" />
          <p>导航</p>
        </div>
      </li>
    </div>
    <div class="shop">
      <h1>特色商品</h1>
      <span>全部></span>
    </div>
    <div class="type">
      <router-link to="/qb">全部</router-link>
      <router-link to="/sbmj">手部美甲</router-link>
      <router-link to="/sjm">上睫毛</router-link>
      <router-link to="/zy">中医养生</router-link>
      <router-link to="/pf">皮肤管理</router-link>
      <router-link to="/spa">SPA按摩</router-link>
      <router-link to="/wb">外部渠道</router-link>
      <router-link to="/kj">科技美容</router-link>
    </div>
    <div class="icon">
      <div class="left">
        <van-icon name="more-o" />&nbsp;&nbsp;
        <span>商品分类</span>
      </div>
      <div class="right">
        <van-icon name="chat-o" />&nbsp;&nbsp;
        <span>联系店铺</span>
      </div>
    </div>
    <!-- <router-view /> -->
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
export default {
  data() {
    return {
      arr: [{ text: "首页", text1: "商品", text2: "评价" }],
    };
  },
  methods:{
    black(){
      this.$router.push("/detail")
    }
  }
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 3rem;
  display: inline-block;
  background: url("../../../public/wx/dp.jpeg") no-repeat center;
  background-size: 100%;
  position: relative;
}
.top1 {
  margin-top: 3%;
  display: flex;
}
.inpBox {
  width: 90%;
  margin-left: 1%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-indent: 0.2rem;
  color: white;
  font-size: 0.3rem;
  border-radius: 1rem;
  background: rgba(254, 254, 254, 0.3);
}
.g {
  width: 100%;
  background: white;
  height: 1.9rem;
  box-sizing: border-box;
  border-bottom: 0.3rem solid #f3f3f3;
}
.g p {
  padding-top: 0.85rem;
  padding-left: 9%;
  font-size: 0.25rem;
}
.inpBox input {
  width: 90%;
  border: none;
  color: white;
  background: none;
}
.star {
  color: #b58863;
}
.dzMsg {
  display: flex;
  width: 94%;
  margin-left: 3%;
  margin-top: 4%;
}
.h2 {
  color: white;
  font-size: 0.38rem;
}
.pic {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}
.gt {
  width: 0.3rem;
  margin-left: 2%;
}
.sText {
  color: white;
}
.hb {
  position: absolute;
  bottom: -0.6rem;
  width: 90%;
  margin-left: 5%;
  height: 1.1rem;
  border-radius: 0.1rem;
  box-shadow: 0rem 0.15rem 0.25rem 0rem rgb(0 0 0 / 5%);
  background: white;
  box-sizing: border-box;
  padding: 0.15rem 0.3rem;
}
.h6 {
  font-size: 0.3rem;
  color: #774ed7;
}
.h7 {
  margin-top: 0.04rem;
  color: #666;
}
.h7 span {
  margin-right: 0.3rem;
  margin-top: 0.2rem;
}

#dian {
  overflow: hidden;
  background-color: #f8f8f8;
}
.top {
  width: 100%;
  height: 1rem;
  position: fixed;
  display: flex;
  justify-content: space-between;
  background-color: white;
  z-index: 99;
}
.top ul {
  width: 60%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 1rem;
}
.top ul li {
  flex: 1;
  height: 1rem;
  margin-top: 0;
  color: gray;
  font-size: 0.26rem;
}
.top .top1 {
  width: 25%;
  height: 1rem;
  text-align: center;
  line-height: 1.2rem;
  font-size: 0.5rem;
}
.bgc img {
  width: 100%;
  height: 3rem;
}
.bgc .name {
  width: 80%;
  height: 2rem;
  background-color: white;
  position: absolute;
  top: 0.9rem;
  left: 0.7rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.bgc .logo {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: url("../../../public/5.webp");
  background-size: 1.5rem 1.5rem;
}
.bgc .logo1 {
  width: 4rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.bgc .logo1 span:nth-of-type(1) {
  width: 1rem;
  height: 0.3rem;
  background-color: #f3cdb6;
  color: #80604c;
}
.bgc .logo1 span:nth-of-type(2) {
  font-size: 0.34rem;
}
.bgc .logo1 p {
  color: gray;
}
.adr {
  width: 90%;
  /* height: 3rem; */
  background-color: white;
  margin: auto;
  border-radius: 0.2rem;
  box-sizing: border-box;
  padding: 4%;
}
.adr li {
  width: 100%;
  height: 0.9rem;
  border-bottom: 0.01rem solid gray;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.adr li:nth-of-type(3) {
  height: 1.2rem;
}
.adr li img {
  width: 1rem;
  height: 0.48rem;
}
.adr li .li1 {
  display: flex;
  align-items: center;
  color: gray;
}
.adr .li2 {
  display: block;
  line-height: 0.9rem;
}
.adr .li2 span:nth-of-type(1) {
  font-size: 0.26rem;
  color: gray;
}
.adr .li2 span:nth-of-type(2) {
  border: 0.01rem solid #b58863;
  color: #b58863;
}
.adr .li2 span:nth-of-type(3) {
  border: 0.01rem solid #b58863;
  color: #b58863;
}
.adr li:nth-of-type(3) img {
  width: 0.3rem;
  height: 0.3rem;
}
.adr li:nth-of-type(3) b {
  font-size: 0.26rem;
  color: gray;
  font-weight: 400;
}
.adr li:nth-of-type(3) span {
  color: gray;
}
.adr li:nth-of-type(3) h2 {
  font-size: 0.26rem;
}
.shop {
  width: 90%;
  height: 1rem;
  background-color: white;
  margin: auto;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  line-height: 1rem;
  box-sizing: border-box;
  padding: 4%;
  padding-bottom: 1rem;
}
.shop span {
  color: gray;
  font-size: 0.26rem;
}
.type {
  width: 90%;
  height: 1.5rem;
  background-color: white;
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.type a {
  display: block;
  width: 1.4rem;
  height: 0.5rem;
  color: black;
  background-color: #f4f4f4;
  text-align: center;
  line-height: 0.5rem;
  border-radius: 0.2rem;
}
.type .router-link-active {
  background-color: #c29671;
  color: white;
}
.icon {
  width: 100%;
  height: 1rem;
  position: fixed;
  bottom: 0;
  display: flex;
}
.icon .left,
.right {
  width: 50%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.28rem;
  background-color: white;
}
</style>
